<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="ui/bootstrap/js/bootstrap-tab.js"></script>
<script type="text/javascript" src="scripts/vendor/jquery.form.js"></script>
<script type="text/javascript" src="scripts/vendor/knockout-2.0.0.js"></script>
<script type="text/javascript" src='ui/my97/WdatePicker.js'></script>
<script type="text/javascript" src='script/lang/zh-cn.js'></script>
<title><s:property value="currentPerson" />的个人空间</title>
</head>
<body>
	<div class="row">
		<!-- 左 -->
		<div class="span2">
			
			<div class="clearfix" data-bind="with:person"><!-- 头像 -->
				<div class="pull-left" style="width: 60px;">
					<img alt="" data-bind="attr:{src:headPortrait}">
				</div>
				<div class="pull-left" data-bind="text:showName"> </div>
			</div>	
			<hr/>
			<div id="menus" class="well" style="padding: 8px 0;">
	        <ul class="nav nav-list">
	          <li class="nav-header">个人信息管理</li>
	          <li class=""><a id="profile" href="javascript:void(0);">编辑个人资料</a></li>
	          <li><a id="psw"  href="javascript:void(0);">修改登录密码</a></li>
	          <li><a id="portrait" href="javascript:void(0);">更改头像</a></li>
	        </ul>
	      </div>
		</div>
		<!-- 右 -->
		<div id="right-content" class="span10">
		<div id="profile_view" class="hide">
		<div class="page-header">
			    <h2>更改个人资料 </h2>
		</div>
		<form id="profile_form" action="person/save-profile.action" class="form-horizontal" data-bind="with:person">
		<fieldset>
    		<div class="row">
    		<div class="span4">
    		<div class="control-group">
		      <label class="control-label" for="location">所在地</label>
		      <div class="controls">
		        <input  id="location" name="person.location" type="text" class="input-medium" data-bind="value:location"/>
		      </div>
		    </div>
		    <div class="control-group">
		      <label class="control-label" for="realName">真实姓名</label>
		      <div class="controls">
		        <input  id="realNeme" name="person.realName" type="text" class="input-medium" data-bind="value: realName"/>
		      </div>
		    </div>
		    <div class="control-group">
		      <label class="control-label" for="showName">显示名</label>
		      <div class="controls">
		        <input  id="showName" name="person.showName" type="text" class="input-medium" data-bind="value:showName"/>
		        <span class="help-block">其他人将看到这个名字</span>
		      </div>
		    </div>
		    <div class="control-group">
		      <label class="control-label" for="gender">性别</label>
		      <div class="controls">
		      	
		      	<input  id="gender" name="person.gender" value="Male"  type="radio" class="input-medium" data-bind="checked:gender"/>
		      	男
		      	<input  id="gender" name="person.gender" value="Female" type="radio" class="input-medium" data-bind="checked:gender"/>
		      	女
		      </div>
		    </div>
		    
		    <div class="control-group">
		      <label class="control-label" for="signature">个性签名</label>
		      <div class="controls">
		      	<textarea id="signature" name="person.signature" data-bind="value:signature" rows="" cols=""></textarea>
		      </div>
		    </div>
		    </div>
		    
		    
		    <div class="span4">
	   		<div class="control-group">
		      <label class="control-label" for="telephone">手机</label>
		      <div class="controls">
		        <input  id="telephone" name="person.telephone" type="text" class="input-medium" data-bind="value:telephone"/>
		      </div>
		    </div>
		    
		    <div class="control-group">
		      <label class="control-label" for="qq">QQ</label>
		      <div class="controls">
		        <input  id="qq" name="person.qq" type="text" class="input-medium" data-bind="value:qq"/>
		      </div>
		    </div>
		    
		    <div class="control-group">
		      <label class="control-label" for="job">职业</label>
		      <div class="controls">
		        <input  id="job" name="person.job" type="text" class="input-medium" data-bind="value:job"/>
		      </div>
		    </div>
		    
		    <div class="control-group">
		      <label class="control-label" for="workUnit">工作单位</label>
		      <div class="controls">
		        <input  id="workUnit" name="person.workUnit" type="text" class="input-medium" data-bind="value:workUnit"/>
		      </div>
		    </div>
		    </div>
		    </div>
		    <input type="hidden" name="person.version" data-bind="value: version" />
		    <input type="hidden" name="person.id" data-bind="value:id" />
		    <input type="hidden" name="person.headPortrait" data-bind="value:headPortrait" />
		    <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存</button>
          	</div>
		</fieldset>		    
		</form>
			
		</div>
		
		<!-- 更改密码 -->
		<div id="psw_view" class="hide">
			<div class="page-header">
			    <h2>更改密码 </h2>
			</div>
			
			<form id="psw_form" action="person/update-password.action" class="form-horizontal">
			<div>
			 <div class="control-group">
		      <label class="control-label" for="psw">原密码</label>
		      <div class="controls">
		        <input  id="psw" name="oldPsw" type="password" class="input-medium"/>
		      </div>
		    </div>
		    
		    <div class="control-group">
		      <label class="control-label" for="new_psw">新密码</label>
		      <div class="controls">
		        <input  id="new_psw" name="newPsw" type="password" class="input-medium"/>
		      </div>
		    </div>
		    
		    <div class="control-group">
		      <label class="control-label" for="re_psw">再一次输入密码</label>
		      <div class="controls">
		        <input  id="re_psw"  type="password" class="input-medium"/>
		      </div>
		    </div>
		    <input type="hidden" name="uid" data-bind="value:user().id" />
		    <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存</button>
          	</div>
			</div>
			</form>
		</div>
		
		<!-- 更改头像 -->
		<div id="por_view" class="hide">
			<div class="page-header">
			    <h2>更改头像 </h2>
			</div>
			<div>
				<form id="portrait_form" action="person/upload-portrait.action" method="post" enctype="multipart/form-data">
					<input type="file" name="img" size="20" class="input-file"/>
					<input id="img_name" type="hidden" name="imgName"/>
					&nbsp;&nbsp;&nbsp;
					<input id="up_btn" type="submit" value="上传" class="btn" /> 
				</form>
			</div>
			<div class="hide">
				<img id="img" alt="" src="" width="300px" height="300px" />
				<form id="form_save" action="file/save-head-img.action" style="display:none;">
				    <input type="hidden" id="img_left" name="left" value="">
				    <input type="hidden" id="img_top" name="top" value="">
				    <input type="hidden" id="img_width" name="width" value="">
				    <input type="hidden" id="img_height" name="height" value="">
				    <input type="hidden" id="imgUrl" name="imgUrl"/>
				</form>
				<button id="save_head" class="btn">保存</button>
			</div>
		</div>
		</div>
	</div>
<script type="text/javascript">

function PersonModel(person) {
	var self = this;
	self.id = ko.observable(person.id);
	self.version = ko.observable(person.version);
	self.showName = ko.observable(person.showName);
	self.realName = ko.observable(person.realName);
	self.location = ko.observable(person.location);
	self.headPortrait = ko.observable(person.headPortrait);
	self.signature = ko.observable(person.signature || '这家伙很懒，什么也没有写');
	self.telephone = ko.observable(person.telephone);
	self.email = ko.observable(person.email);
	self.qq = ko.observable(person.qq);
	self.job = ko.observable(person.job);
	self.workUnit = ko.observable(person.workUnit);
	self.gender = ko.observable(person.gender);
	self.birthday = ko.observable(person.birthday);
};

function UserModel(user){
	var self = this;
	
	self.id = ko.observable(user.id);
	self.version = ko.observable(user.version);
	self.username = ko.observable(user.username);
	
}

function AppView(){
	var self = this;
	
	self.person = ko.observable();
	self.user = ko.observable();
}

appView = new AppView();


$(function(){
	
	
	//初始化appView
	init_(appView);
	
	ko.applyBindings(appView);
	console.log('bind');
	
	$('#menus a').click(function(){
		removeAllActive();
		$(this).parent().addClass('active');
	});
	
	//编辑个人资料
	$('#profile').click(function(){
		hideOther();
		$('#profile_view').show();
	});
	
	$('#birthday').click(function(){
		WdatePicker();
	});
	
	$('#profile_form').submit(function(){
		$(this).ajaxSubmit(function(json){
			if(json.error){
				alert(json.error);
			}else{
				location.reload();
			}
		});
		return false;
	});
	
	//更改密码
	$('#psw').click(function(){
		hideOther();
		$('#psw_form').resetForm();
		$('#psw_view').show();
	});
	
	$('#psw_form').submit(function(){
		$(this).ajaxSubmit(function(json){
			if(json.error){
				alert(json.error);
			}else{
				location.reload();
			}
		});
		return false;
	});
	
	//更改头像
	$('#portrait').click(function(){
		hideOther();
		$('#por_view').show();
	});
	
	$('#profile').trigger('click');
	
	$('#portrait_form').ajaxForm({
		dataType: 'json',
		success: function(json) {
			if(!json.error){
				location.reload();
			}
		}
	});
	
	$('#portrait_form').ajaxStart(function(){
		$('#img_name').val();
		$('#up_btn').val('正在上传');
	});
	
});

//将其他菜单的ative class移除
function removeAllActive(){
	$.each($('#menus  *'), function(i, v){
		if($(v).hasClass('active')) {
			$(v).removeClass('active');
		}
	} );
}

function hideOther(){
	$.each($('#right-content > div'), function(i, v){
		$(v).hide();
	});
}

function init_(appView){
	var url = 'person/json/get-current-person-user.action';
	$.getJSON(url, function(json){
		
		if(json.person  && json.person.birthday && json.person.birthday.indexOf('T') != -1){
			json.person.birthday = json.person.birthday.split('T')[0];
		}
		appView.person(json.person);
		appView.user(json.user);
	});
	
}



</script>
</body>
</html>